<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心</title>
    
    <link rel="stylesheet" href="__STATIC__/web/css/public.css">
    <link rel="stylesheet" href="__STATIC__/web/css/edit_mine.css">
    <link rel="stylesheet" href="__STATIC__/web/css/bui.css">
    <script src="__STATIC__/web/js/rem.js"></script>
    <script src="__STATIC__/web/js/jquery.js"></script>
    <script src="__STATIC__/web/js/bui.js"></script>
    <style>
        html,bdoy{
            overflow-y:scroll;
        }
        .bui-page{
            overflow-y: scroll;
        }
    </style>
</head>

<body>
        <div class="bui-page" >
    <main>
            <div class="avatar">
                    <input class="inputfile" id="imageInput" type="file">
                    <div class="lt">
                        <span>头像</span>
                        <img id='head_img' src="{$user.head_img}" alt="">
                    </div>
                    <img class="rt" src="__STATIC__/web/img/more.png" alt="">
                </div>
                <div class="username">
                    <span>姓名</span>
                    <input type="text" placeholder="请输入姓名" value="{$user.real_name}"  id="name">
                </div>
                <div class="worknum">
                    <span>工号</span>
                    <input type="number" value="{$user.teacher_no}" disabled>
                </div>
                <div class="tel">
                    <span>联系方式</span>
                    <input type="number" placeholder="请输入联系方式"  value="{$user.phone}" id="phone" >
                </div>
                <div class="college">
                    <div class="lt">
                        <span>学院</span>
                        <div id="sel-val" style="-webkit-box-orient: vertical; ">{$teacher.college_detail.college_name|default="请选择学院"}</div>
                        <select id="select-value" onchange="college();">
                            <option value="请选择学院" selected>请选择学院</option>
                            <foreach name="colleges" item="vo">
                                <option <if condition="$teacher.college eq $vo.id">selected</if> value="{$vo.college_name}" data="{$vo.id}">{$vo.college_name}</option>
                            </foreach>
                        </select>
                        <input type="hidden" id="selectedCollege" value="{$teacher.college}"/>
                    </div>
                    <script>
                        function college() {
                            $('#sel-val').text($("#select-value option:selected").val())
                            console.log($("#select-value option:selected").attr("data"))
                            const id = $("#select-value option:selected").attr("data");
                            $.post("{:url('me/getSpecialties')}", {'college_id': id}, function (res) {
                                if (res.code == 1) {
                                    layer.msg(res.msg, {icon: 1}, function () {
                                        return false;
                                    });
                                } else {
                                    $("#select-value1").empty();
                                    const data = res.data;
                                    data && data.map(spec => {
                                        $("#select-value1").append(`  <option value="${spec.specialty_name}">${spec.specialty_name}</option>`);
                                    })

                                    if (data && data.length > 0) {
                                        $("#select-value1").val(data[0].id)
                                        $("#sel-val1").text(data[0].specialty_name)
                                    } else {
                                        $("#select-value1").val(null)
                                        $("#sel-val1").text("请选择专业")
                                    }
                                }
                            });
                        }
                    </script>
                    <div class="rt">
                        <img src="__STATIC__/web/img/more.png" alt="">
                    </div>
                </div>
                <div class="profess">
                    <div class="lt">
                        <span>专业</span>
                        <div id="sel-val1" style="-webkit-box-orient: vertical; ">{$teacher.specialty_detail.specialty_name|default="请选择专业"}</div>
                        <select id="select-value1" name="specialty" onchange="college1();">
                            <option value="请选择专业" selected>请选择专业</option>
                            <foreach name="specialties" item="vo">
                                <option  <if condition="$teacher.college eq $vo.id">selected</if>  value="{$vo.specialty_name}">{$vo.specialty_name}</option>
                            </foreach>
                        </select>

                        <input type="hidden" id="selectedSpecialty"  value="{$teacher.specialty}"/>
                    </div>
                    <div class="rt">
                        <img src="__STATIC__/web/img/more.png" alt="">
                    </div>
                    <script>
                        function college1() {
                            $('#sel-val1').text($("#select-value1 option:selected").val())
                        }
                    </script>
                </div>
                <div class="tag">
                    <div class="lts">
                        <span>标签</span>
                        <input type="text" placeholder="新建标签" id="tag" style="width:3rem;flex: unset">
                    </div>
                    <button class="save" onclick="save()">保存</button>
                </div>
                <div class="custom-tag" style="border: 0">
                    <div class="lt">
                        <span>自主标签</span>
                        <button id="edit-tag" class="edit-tag">编辑</button>
                    </div>
                </div>
                <ul class="custom-list" id="custom-item">
                    <!-- <li class="custom-item">研究员</li> -->
                    <foreach name="tagList" item="vo">
                        <li class='cus-li'><div class='custom-item <in name="vo.tag" value="$teacher.tag_text">selected</in>'>{$vo.tag}</div><img id='deltag' class='deltags' src='__STATIC__/web/img/del.png'/></li>
                    </foreach>
                </ul>
                <div class="introduce" onclick="linktopc()">
                    <span>个人简介</span>
                    <!-- <script id="container" name="content" type="text/plain">
                        {$teacher.resume|raw}
                    </script> -->
                </div>
                <div id="submit" class="submit">
                    <button>保存</button>
                </div>
                <div class="bottom-bar">
                    <div>Copyright©2019 　山东科技大学 </div>
                    <div>鲁ICP备09051012号</div>
                </div>
    </main>

</div>

        <script src="__PUBLIC__/js/public/jquery-1.11.3.min.js"></script>
        <script src="__PUBLIC__/js/public/bootstrap.min.js"></script>
        <script src="__PUBLIC__/js/layer/layer/layer.js"></script>

        <!-- 配置文件 -->
        <script type="text/javascript" src="__STATIC__/ueditor/ueditor.config.js"></script>
        <!-- 编辑器源码文件 -->
        <script type="text/javascript" src="__STATIC__/ueditor/ueditor.all.js"></script>
        <!-- 实例化编辑器 -->
        <script type="text/javascript">
            function linktopc(){
                alert('请去PC端编辑个人介绍')
            }
            var ue = UE.getEditor('container', {
                toolbars: [
                    [
                        'undo', //撤销
                        'bold', //加粗
                        'underline', //下划线
                        'preview', //预览
                        'horizontal', //分隔线
                        'inserttitle', //插入标题
                        'cleardoc', //清空文档
                        'fontfamily', //字体
                        'fontsize', //字号
                        'paragraph', //段落格式
                        'simpleupload', //单图上传
                        'insertimage', //多图上传
                        'attachment', //附件
                        'music', //音乐
                        'inserttable', //插入表格
                        'emotion', //表情
                        'insertvideo', //视频
                        'justifyleft', //居左对齐
                        'justifyright', //居右对齐
                        'justifycenter', //居中对
                        'justifyjustify', //两端对齐
                        'forecolor', //字体颜色
                        'fullscreen', //全屏
                        'edittip ', //编辑提示
                        'customstyle', //自定义标题
                        'template', //模板
                    ]
                ]
            });
        </script>

    <script>
        var imgArray = [];
        var xmlhttp;
        var isClick = true;
        xmlhttp = new XMLHttpRequest();

        $('#headImage').on('change', function () {
            //当chooseImage的值改变时，执行此函数
            var filePath = $(this).val(), //获取到input的value，里面是文件的路径
                fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),//这段下面检测用
                src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式就是可以让这个某个img的src等于他，就能显示
            //获取input 中的file流
            var files = document.getElementById("headImage").files;
            //from路径
            var FileController = "https://api.it120.cc/zhuyuan98/dfs/upload/file";
            //创建一个不再dom树上的from
            var form = new FormData();
            form.append("author", "hooyes");                        // 可以增加表单数据
            form.append("file", files[0]);                           // 文件对象
            //这一段是原生js的ajax发送需要判断ie6和5上面给做够判断
            // xmlhttp.onreadystatechange = function () {
            //     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            //         imgArray[0] = xmlhttp.responseText;
            //         console.log(xmlhttp)
            //     }
            // }
            //这俩东西就不用动了
            xmlhttp.open("post", FileController, true);
            xmlhttp.send(form);
            // 检查是否是图片
            if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
                bui.alert('上传错误,文件格式必须为：png/jpg/jpeg');

                return;
            } else {
                $('#head_img').attr('src', src);
                //$('#headImage_on').addClass("uploaded");
                //src = '';
                /* $('#file1_on').html('<input type="file" name="file1" style="position: absolute; right: -160px;top: 0px;opacity:0;" id="chooseImage" value="">重新上传');*/
                return;
            }
        });
        function save() {
            if ($('#tag').val().length == 0) {
                bui.alert('请填写标签')
            } else {
                var html = "<li class='cus-li'><div class='custom-item'>" + $('#tag').val() + "</div><img id='deltag' class='deltags' src='__STATIC__/web/img/del.png'/></li>"
                $('.custom-list').append(html);
                $('#tag').val('');
                setDom();
                $('#edit-tag').show()
                deltag();
                isClick = true;
                $('#edit-tag').text("编辑")
                $('.deltags').hide()
            }
        }
        // 点击变背景颜色
        function setDom() {
            var item = $('.custom-item');
            for (var i = 0; i < item.length; i++) {
                item[i].index = i;
                item[i].onclick = function () {
                    if (item[this.index].className == 'custom-item') {
                        item[this.index].className = 'custom-item selected';
                    } else {
                        item[this.index].className = 'custom-item';
                    }
                }
            }
        }
        // 点击编辑
        $('#edit-tag').click(function () {
            if (isClick == false) {
                isClick = true;
                $('.deltags').hide()
                $('#edit-tag').text("编辑")
            }
            else if (isClick == true) {
                isClick = false;
                $('.deltags').show()
                $('#edit-tag').text("完成")
            }
        })
        // 点击删除
        function deltag() {

            var del = $('.deltags');
            if (del.length == 0) {
                        isClick = true;
                        $('#edit-tag').text("编辑")
                    }
            for (var i = 0; i < del.length; i++) {
                del[i].index = i;
                del[i].onclick = function () {
                    var li = document.getElementsByClassName('cus-li');
                    console.log(this.index);
                    var item = document.getElementById("custom-item");
                    item.removeChild(li[this.index]);
                    deltag();

                }
            }
            // .click(function () {
            //     console.log($(this).index())
            //     var index = $(this).index();

            // })
        }
        var tagNames = "{$teacher.tag_text}" === "" ? [] : "{$teacher.tag_text}".split(",");

        $("#submit").click(function () {
            alert('保存')


            $('#save').on('click', function () {

                var image = $(".imageView").attr('src')
                var name = $("#name").val();
                var phone = $("#phone").val()
                var college = $("#selectedCollege").val()
                var specialty = $("#selectedSpecialty").val()
                var tag_text = tagNames.join(',')
                var content = UE.getEditor('container').getContent()
                const data = {
                    image,
                    real_name: name,
                    phone,
                    college,
                    specialty,
                    tag_text,
                    resume: content
                }
                console.log(data)
                $.post("{:url('me/saveTeacher')}", data, function (res) {
                    if(res.code == 0){
                        layer.msg(res.msg, {icon: 1}, function () {
                            window.location.reload()

                            return false;
                        });
                    }else{
                        layer.msg(res.msg, {icon: 1}, function () {
                            window.location.reload()
                            return false;
                        });
                    }
                });
            });

        })


        var tagNames = "{$teacher.tag_text}" === "" ? [] : "{$teacher.tag_text}".split(",");
        console.log(tagNames)
        $('#save').on('click', function () {

            var image = $(".imageView").attr('src')
            var name = $("#name").val();
            var phone = $("#phone").val()
            var college = $("#selectedCollege").val()
            var specialty = $("#selectedSpecialty").val()
            var tag_text = tagNames.join(',')
            var content = $("#content").val()

            const data = {
                image,
                real_name: name,
                phone,
                college,
                specialty,
                tag_text,
                resume: content
            }
            console.log(data)
            $.post("{:url('me/saveTeacher')}", data, function (res) {
                if(res.code == 0){
                    layer.msg(res.msg, {icon: 1}, function () {
                        window.location.reload()

                        return false;
                    });
                }else{
                    layer.msg(res.msg, {icon: 1}, function () {
                        window.location.reload()
                        return false;
                    });
                }
            });
        });

        $('#update').on('click', function () {
            $.post('update',{},function (res) {
                if (res.code === 0){
                    return layer.msg(res.msg)
                } else{
                    $('.pop-box').css('display', 'block')
                    $('#popText').text('您在人才库更新成功！')
                }
            })

        })

        $('#affirmBtn').on('click', function () {
            $('.pop-box').css('display', 'none')
        })

        $('.close').click(function () {
            $('.pop-box').css('display', 'none')
        })


        var selectCollege = null;
        function shows1(a,id) {
            selectCollege = {id,college:a};
            $("#dropdownMenu1").text(a);
        }
        function shows2(a) {
            $("#dropdownMenu2").text(a);
        }

        function selectCollege(name, id) {
            $("#college").text(name)
            $("#selectedCollege").val(id)

            $.post("{:url('me/getSpecialties')}", {'college_id': id}, function (res) {
                if (res.code == 1) {
                    layer.msg(res.msg, {icon: 1}, function () {
                        return false;
                    });
                } else {
                    $("#specialtyList").empty();
                    const data = res.data;
                    data && data.map(spec => {
                        $("#specialtyList").append(`<li><a onclick="selectSpecialty($(this).text(),${spec.id})">${spec.specialty_name}</a></li>`);
                    })

                    if (data && data.length > 0) {
                        $("#selectedSpecialty").val(data[0].id)
                        $("#specialty").text(data[0].specialty_name)
                    } else {
                        $("#selectedSpecialty").val(null)
                        $("#specialty").text("请选择专业")
                    }
                }
            });

            console.log(id)

        }

        function selectSpecialty(name, id) {
            $("#specialty").text(name)
            $("#selectedSpecialty").val(id)
            console.log(id)
        }

        $(".tag-box ul li").click(function () {
            let status = $(this).hasClass("active")
            var index = tags.indexOf(`${$(this).context.innerText}`);
            if (status === false) {
                console.log($(this).context.value)
                if (tagNames.length >= 5 && index < 0){
                    layer.msg("最多添加5个标签", {icon: 2}, function () {
                        return false;
                    });
                }else {
                    $(this).addClass('active')
                    tagNames.push(tag)
                }
            } else {
                $(this).removeClass('active')
                tagNames.splice(index, 1)
            }
        });
        $(".imageinput").change(function () {
            didLoadImage(this);
        });

        function addTag(id, tag) {
        }

        function addNewTag() {
            if (tagNames.length >= 5){
                layer.msg("最多添加5个标签", {icon: 2}, function () {
                    return false;
                });
            }else{
                const tag = $("#newTag").val();
                if (!!tag) {
                    $.post("{:url('me/addTag')}", {'newTag': tag}, function (res) {
                        if (res.code == 1) {
                            layer.msg(res.msg, {
                                time: 1500,
                            });
                        } else {
                            let newTag = res.data;
                            const html = `<li onclick="addTag(${res.data.id},${res.data.tag})"class="active">${res.data.tag}</li>`
                            $("#tagList").append(html)
                            tagNames.push(`${res.data.tag}`)
                        }
                    });
                }
            }
        }

        function selectImage() {
            $("#imageInput").click();
        }

        function didLoadImage(x) {
            //取出选择的图片
            var fileInput = x.files[0];
            //判断是否选择了图片
            if (x.files && x.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    //此处得到是图片的base64编码数据
                    imagUrl = e.target.result;
                    console.log(e);
                    $(".imageView").attr('src', imagUrl);
                    //展示哪个样式
                    if (imagUrl) {
                        $('.showImage').css('display', 'inline-flex');
                        $(".input_ImageItem").css('display', 'none');
                    } else {
                        $(".upLoadText").css('display', 'inline-flex');
                        $(".imageView").css('display', 'none');
                    }
                };
                reader.readAsDataURL(x.files[0]);
            }
        }

        setDom();
    </script>

</body>

</html>